<template>
  <div>
    <swiper ref="mySwiper1" :options="swiperOption">
      <swiper-slide v-for="(item, index) in changeSliderList()" :key="index">
        <router-link :to="item.path">
          <img class="img" :src="baseUrl + item.imageUrl" alt="商品图" />
        </router-link>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-scrollbar"></div>
    </swiper>
  </div>
</template>

<script>
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import imgBaseUrl from "utils/imgBaseUrl"
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper);
export default {
  props: {
    sliderList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    changeSliderList() {
        this.sliderList.forEach(el =>  {
            el.path = "/mostbanner";
        });
        return this.sliderList;
    },
  },
  data() {
    return {
      baseUrl: imgBaseUrl,
      swiperOption: {
        loop: true, // 循环轮播
        autoplay: true, // 自动播放  也可设置自动轮播时间，比如：3000
        pagination: {
          // 分页器
          el: ".swiper-pagination",
        },
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper1.swiper;
    },
  },
};
</script>


<style lang="stylus">
@import './../assets/styl/mixin.styl'
.img
  width rem(345)
  height rem(115)
  border-radius rem(5)
.swiper-container
  height rem(115)
  .swiper-pagination-bullet
    background-color #FFFFFF
    width 16px
    height 2px
    border-radius 3px
    bottom -10px
    opacity 0.5
  .swiper-pagination-bullet-active
    background-color $baseColor
    width 16px
    height 2px
    border-radius 3px
    opacity 1
</style>